<template>
  <div>
    <header>
          <n-bar></n-bar>
    </header>
    <article>
      <div>
        <p>广东智能有限公司</p>
        <p>￥90000</p>
      </div>
      <div>
        <p>请选择支付方式</p>
        <p>
          <img
            src="../assets/img/zhifubao.webp"
            alt=""
            width="10px"
            height="10px"
          />
          支付宝支付
          <input type="checkbox" class="fr che" />
        </p>
        <p>
          <img
            src="../assets/img/weixin.webp"
            alt=""
            width="10px"
            height="10px"
          />
          微信支付
          <input type="checkbox" class="fr che" />
        </p>
      </div>
      <div>确认支付</div>
    </article>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
header {
  height: 0.5rem;
  line-height: 0.5rem;
  background: #ff6040;
  font-size: 0.2rem;
  text-align: center;
  position: relative;
  color: #eee;
}
.prect {
  position: absolute;
  left: 0.3rem;
  font-size: 0.2rem;
  color: #eee;
}
article {
  height: 80vh;
  position: relative;
}
article div:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 7vh;
}
article div:nth-child(1) p:nth-child(1) {
  font-size: 0.16rem;
  color: gray;
}
article div:nth-child(1) p:nth-child(2) {
  font-size: 0.22rem;
  color: #333;
}
article div:nth-child(2) {
  margin-left: 0.2rem;
  line-height: 5vh;
}
.che {
  margin-right: 0.1rem;
}
article div:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 10%;
  font-size: 0.2rem;
  width: 3rem;
  height: 0.5rem;
  background-color: rgb(15, 186, 245);
  text-align: center;
  line-height: 0.5rem;
  color: #eee;
  border-radius: 3rem;
}
</style>
